<template>
    <div class="withdrawal">
        <ComHeader title="上传文件" leftArrow='true' v-if="uploadBox"/>
        <div class=" flex-display flex-display-column" :class="uploadBox ? 'upload-box' :'load-box'" id="load">
            <div class="flex-num-one exl-box">
                
                <template v-if="drawalList && drawalList.length">
                    <div class="exl-box__item" 
                        v-for="(item, index) in drawalList" 
                        :key="index" 
                        :class="{'touch-move-active': item.isTouchMove}" 
                        @touchstart="touchstart"
                        @touchmove="touchmove($event,index)"
                    >
                        <div class="content flex-display" @click="fnQueryLogistics(item)">
                            <div class="flex-num-one" :class="{'load-box__div':!uploadBox}">
                                <span class="content-delBtn" v-if="uploadBox">可左滑删除</span>
                                <div class="flex-display flex-num-one" >文件名:{{decodeURI((item.file.split('/')[3]))}}</div>
                                <div class="flex-display flex-num-one">查询名称:{{item.file_name ? item.file_name :''}}</div>
                            </div>
                            <i class="mint-cell-allow-right" v-if="uploadBox"></i>
                            
                        </div>
                        <div class="del" @click="fnDeleteFile(item)">删除</div>        
                    </div>
                </template>
                <template v-else>
                    <div class="not-result flex-display flex-center-align flex-center-pack flex-num-one flex-display-column">
                        <img  src="../../../static/img/not-data.png"/>
                        <span style="color:#666">暂无文件记录哦</span>
                    </div>
                </template>
            </div>
            <div class="upload-box__btn" >
                <span class="upload-box__tit" >温馨提示：仅支持xlsx,xls,csv的文件</span>
                <div @click="fnBatchExportFn">请上传文件</div>
            </div>
           
        </div>
        <input type="file"   style="display:none;" ref="export" @change="exportExcelFn();"/>
    </div>
</template>
<script>
import api from "@/fetch/api"
import ComHeader from '@/common/ComHeader'
import Scroll from '@/base/scroll/scroll'
import Loading from '@/base/loading/loading'
import axios from "axios";
import {Toast,Indicator,MessageBox  } from 'mint-ui';
export default {
    data() {
        return {
            isHasMore: true,            // 是否需要上拉加载
            drawalList: [],             // 列表数据
            isPullup: true,             // 是否需要监听下拉加载
            previous: null,             // 是否还有下一页
            page: 1,                    // 页码
            limit: 10,                  // 条数 
            startX: 0,
            startY: 0,
            uploadBox: false,
            sysAppIds: 'https://wap.sailafeinav.com/queryInfo'
        }
    },
    created() {
        // 获取列表数据
       this.initExcleData()
    },
    mounted() {
        this.uploadBox = document.documentElement.clientWidth >700 ? false : true
        if(!this.uploadBox) {
            document.getElementById('load').style.height = document.documentElement.clientHeight +'px'
        }
    },
    methods: {
       
        onCopy() {
            Toast({
                message: '复制成功',
                duration:1000
            });
        },
        /**
         * @desc 删除文件
         * @params item 当前对象
         */
        fnDeleteFile(item) {
            MessageBox.confirm('', { 
                 message: `你确定删除文件:${decodeURI(item.file.split('/')[3])}吗？`, 
                 title: '提示', 
                 confirmButtonText: '确定', 
                 cancelButtonText: '取消' 
                 }).then(action => { 
                     if (action == 'confirm') {     
                        axios({
                            url: 'choujiang/v1/rm/',
                            method: 'POST',
                            data: {
                                file_id: item.id
                            }
                        }).then(res => {
                        }).catch(result => {
                            if(result.status === 200 && result.data.rm) {
                                Toast({
                                    message: '删除成功',
                                    duration:2000
                                });
                                this.initExcleData()
                            }
                        })
                     }
                 }).catch(err => { 
                
            });
        },
        fnQueryLogistics(item) {
            item.is_set ? this.$router.push("/importResult?QR_code="+item.QR_code+'&url='+item.id+'&file_name='+item.file_name) : this.$router.push("/queryLogistics?id="+item.id); 
        },
        touchstart(e) {
            this.cancelDel()
            this.startX =  e.changedTouches[0].clientX
            this.startY = e.changedTouches[0].clientY
           
        },
        // 重置其他项回缩原来位置
        cancelDel() {
            this.drawalList.forEach(function (v, i) {
                if (v.isTouchMove){
                    v.isTouchMove = false;
                }
            })
        },
        
        /**
         * @param {Object} e 当前滑动对象
         * @param {Number} index 当前滑动列表索引
         */
        touchmove(e,index) {
            var that = this,
            index = index,              // 当前索引
            startX = this.startX,       // 开始X坐标
            startY = this.startY,       // 开始Y坐标
            touchMoveX = e.changedTouches[0].clientX,   // 滑动变化坐标
            touchMoveY = e.changedTouches[0].clientY,   // 滑动变化坐标
            // 获取滑动角度
            angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
            that.drawalList.forEach(function (v, i) {
                v.isTouchMove = false
                // 滑动超过30度角 return
                if (Math.abs(angle) > 30) return;
                if (i == index) {
                    if (touchMoveX > startX) // 右滑
                    {
                    v.isTouchMove = false
                    }
                    else // 左滑
                {
                    v.isTouchMove = true
                }
                }
            })
        },

        /**
         * @param {String} start 滑动开始位置
         * @param {String} end 滑动结束位置
         */
        angle(start, end) {
            var _X = end.X - start.X,
                _Y = end.Y - start.Y
            // 返回角度 /Math.atan()返回数字的反正切值
            return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
        },
        initExcleData() {
            axios({
                url: '/choujiang/v1/User_File/',
                method: 'POST',
                data: {
                    user_id: this.getUId()
                }
            }).then(res => {
            }).catch(result => {
                result.data.forEach((item) => {
                    item.isTouchMove = false
                })
               this.drawalList = result.data
            })
        },

        /**
         * @desc 上传文件 如在手机找不到文件建议在电脑端上传
         */
        fnBatchExportFn() {
            if(this.uploadBox) {
                MessageBox.confirm('', { 
                     message: `提示：若找不到文件，可使用电脑版微信上传文件`, 
                     title: '提示', 
                     confirmButtonText: '确定', 
                     showCancelButton:false,
                     }).then(action => { 
                         this.$refs.export.click()
                     }).catch(err => { 
                    
                });
            }else {
                this.$refs.export.click()
            }
        },

        // 上传文件
        exportExcelFn() {
            let file = event.target.files[0]
            let fileSize = event.target.files[0].size
            let size = fileSize / 1024;    
            if(size > 1000) {
                Toast({
                    message: '您当前上传文件大于1M，请重新上传',
                    duration:2000
                });
                this.$refs.export.value = ''
                return
            }
            if(file.name.indexOf('xlsx') != -1 || file.name.indexOf('xls') != -1  || file.name.indexOf('csv') != -1) {
                let fd = new FormData()
                fd.append('files', file)
                fd.append('user_id', this.getUId())
                axios({
                    url: '/choujiang/v1/User_File/',
                    method: 'POST',
                    transformRequest: [(data) => {
                        let ret = fd
                        return ret
                    }],
                    headers: {
                        'Content-Type': 'multipart/form-data'
                    }
                }).then(res => {
                    Indicator.close()
                    this.$refs.export.value = ''

                }).catch(err => {
                    Indicator.close()
                    this.$refs.export.value = ''
                    if(err.status == 200 && !err.data.code) {
                        Toast({
                            message: '上传成功',
                            duration:2000
                        });
                        this.initExcleData()
                    }
                })
            }else {
                Indicator.close()
                Toast({
                    message: '请上传正确的文件',
                    duration:1000
                }); 
            }
        },

        /**
         * @desc 是否需要下拉加载
         */
        searchMore() {
            if(this.previous) {
                this.page++
                this.getTxRecord(true)
            }
        }
    },
    components: {
        Scroll,
        ComHeader,
        Loading,
        Toast,
        Indicator,
        MessageBox
    }
}
</script>
<style lang="scss" scoped>
    .copyText {
        background: #0087ff;
        padding: 5px;
        display: inline-block;
        color: #fff;
        border-radius: 3px;
        margin-left: 2px;
    }
    .pc-delete {
        position:absolute;
        padding: 0 20px;
        background: #ff0000;
        height: 35px;
        line-height: 35px;
        right: 10px;
        top: 50%;
        border-radius: 3px;
        color: #fff;
        margin-top: -12px;
    }
    .load-box {
        background: #fff;
        >div{
            font-size: 24px;
        }
    }
    .load-box__div > div {
        font-size: 18px;
    }
    .not-result {
        height: 100%;
        img {
            margin-bottom: 10px;
        }
    }
    .upload-box {
        width: 100%;
        position: fixed;
        left: 0;
        top: 1.5rem;
        right: 0;
        bottom: 0;
        background: #fff;
    }
    .withdrawal{
        width: 100%;
        height: 100%;
    }

    .upload-box__iocn >img {
        width: 5rem;
        height: 5rem;
    }

    .upload-box__btn {
        width: 100%;
        color: #fff;
        text-align: center;
        margin: 0 auto;
        padding: 10px 10px ;
        box-sizing: border-box;
        border-top: 1px solid #e5e5e5;
        >div{
            border-radius: 5px;
            height: 45px;
            font-size: 0.45rem;
            line-height: 45px;
            cursor: pointer;
            background: #0087ff;
        }
    }

    .upload-box__tit {
        color: #ff0000;
        font-size: 0.35rem;
        margin-bottom: 10px;
        display: block;
    }
    .exl-box {
        overflow: auto;
    }

    .exl-box__item {
        font-size: 14px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #e5e5e5;
        width: 100%;
        overflow: hidden;
        height: 80px;
        padding-left: 10px;
    }
    .content {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        line-height: 22px;
        margin-right: 0;
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
        -webkit-transform: translateX(90px);
        transform: translateX(90px);
        margin-left: -90px;
        position: relative;
        padding-left: 10px;
        img {
            height:2rem;
            width: 2rem;
            margin:20px 20px;
        }
    }

    .content-delBtn {
       
        color: #e51c23;
    }
    
    .del {
        background-color: #e51c23;
        width: 90px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        -webkit-transform: translateX(90px);
        transform: translateX(90px);
        -webkit-transition: all 0.4s;
        transition: all 0.4s;
    }
    .touch-move-active .content, .touch-move-active .del {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
</style>


